/**
 * Created by alan on 2017/4/27.
 * 降雨信息
 */
Ext.define("Admin.view.baseInfo.ddsDrRsvr", {
    extend: "Ext.container.Container",
    xtype: "ddsDrRsvr",
    requires: [
        "Admin.store.baseInfo.DdsDrRsvr",
        "Admin.common.form.field.DateTimeField"
    ],
    //起别名
    alias: "ddsDrRsvr",
    controller: "ddsDrRsvrController",
    userCLs: "big-100 small-100",
    layout: "fit",
    height: 200,
    items: {
        xtype: "panel",
        layout: "anchor",
        cls: "dashboard-main-chart shadow",
        width: "100%",
        height: 200,
        margin: 7,
        bodyPadding: 7,
        layout: {
            type: "vbox",
            align: "stretch" //拉伸使其充满整个父容器
        },
        items: [{
                tbar: [{
                        xtype: "combobox",
                        labelWidth: 60,
                        fieldLabel: "测站名称",
                        reference: "stcd",
                        displayField: "stNm",
                        queryMode: "local",
                        valueField: "stcd",
                        triggerAction: "all",
                        anyMatch: true,
                        listeners: {
                            added: function(combo) {
                                var _that = this;
                                var store = Ext.create("Ext.data.Store", {
                                    fields: ["stNm", "stcd", "itemR", "river"],
                                    data: statList
                                });
                                store.clearFilter();
                                store.filter({
                                    property: "itemR",
                                    value: "1"
                                });
                                store.filter({
                                    property: "river",
                                    value: config.RIVER
                                });
                                combo.setStore(store);
                                combo.setValue(store.getData().items[0].data.stcd);
                            }
                        }
                    },
                    {
                        xtype: "timesfield",
                        margin: "0 10 0 10",
                        fieldLabel: "时间",
                        format: "Y-m-d H:i:s",
                        // editable: false,
                        maxValue: new Date(),
                        value: config.defaultStartDate,
                        labelWidth: 40,
                        reference: "startTm",
                        listeners: {
                            change: function() {
                                var edDt = this.nextSibling().nextSibling();
                                edDt.setMinValue(this.value);
                            }
                        }
                    },
                    "--",
                    {
                        xtype: "timesfield",
                        maxWidth: 220,
                        value: config.defaultEndDate,
                        format: "Y-m-d H:i:s",
                        // editable: false,
                        maxValue: new Date(),
                        reference: "endTm"
                    },
                    {
                        xtype: "button",
                        text: "查询",
                        iconCls: "x-fa  fa-file-o",
                        handler: "check",
                        margin: "0 10 0 10",
                        style: "border-radius:4px;-webkit-border-radius: 4px;"
                    }
                ],
                height: 60
            },
            {
                xtype: "panel",
                title: "水库水情",
                height: "100%",
                border: true,
                flex: 1,
                layout: {
                    type: "hbox",
                    align: "stretch"
                },
                items: [{
                        xtype: 'panel',
                        layout: 'vbox',
                        flex: 1,
                        items: [{
                                xtype: "component",
                                id: 'inforChart4',
                                reference: "chart",
                                flex: 1,
                                highchart: null,
                                height: "100%",
                                width: "100%",
                                border: 1,
                                style: {
                                    borderColor: "#ccc",
                                    borderStyle: "solid"
                                },
                                html: '<div id="ddsDrRsvrChart" style="height: 100%;" ></div>',
                                listeners: {
                                    afterRender: function(dom) {
                                        var me = this;
                                        var domId = document.getElementById("ddsDrRsvrChart");
                                        me.highchart = new Highcharts.Chart({
                                            chart: {
                                                type: 'spline',
                                                renderTo: domId
                                            },
                                            title: {
                                                text: ""
                                            },
                                            xAxis: {
                                                categories: [],
                                                labels: {
                                                    step: 8,
                                                }
                                            },
                                            legend: {
                                                align: "center",
                                                verticalAlign: "top"
                                            },
                                            yAxis: [{
                                                title: {
                                                    text: "库上水位(m)"
                                                }
                                            }, {
                                                opposite: true,
                                                title: {
                                                    text: '入库流量(m³/s)'
                                                }
                                            }],
                                            tooltip: {
                                                valueSuffix: ""
                                            },
                                            series: [{
                                                name: "库上水位",
                                                connectNulls: true,
                                                data: []
                                            }, {
                                                name: "入库流量",
                                                connectNulls: true,
                                                data: []
                                            }]
                                        });
                                    },
                                    resize: function(me, width, height) {
                                        this.highchart.setSize(width, height);
                                    }
                                }
                            },
                            {
                                xtype: "component",
                                id: 'inforChart6',
                                reference: "chart",
                                flex: 1,
                                highchart: null,
                                height: "100%",
                                width: "100%",
                                border: 1,
                                style: {
                                    borderColor: "#ccc",
                                    borderStyle: "solid"
                                },
                                html: '<div id="ddsDrRsvrChart2" style="height: 100%;" ></div>',
                                listeners: {
                                    afterRender: function(dom) {
                                        var me = this;
                                        var domId = document.getElementById("ddsDrRsvrChart2");
                                        me.highchart = new Highcharts.Chart({
                                            chart: {
                                                type: 'column',
                                                renderTo: domId
                                            },
                                            title: {
                                                text: ""
                                            },
                                            xAxis: {
                                                categories: [],
                                                labels: {
                                                    step: 8,
                                                }
                                            },
                                            legend: {
                                                align: "center",
                                                verticalAlign: "top"
                                            },
                                            yAxis: {
                                                title: {
                                                    text: "蓄水量(亿m³)"
                                                }
                                            },
                                            tooltip: {
                                                valueSuffix: ""
                                            },
                                            series: [{
                                                name: "蓄水量",
                                                connectNulls: true,
                                                data: []
                                            }]
                                        });
                                    },
                                    resize: function(me, width, height) {
                                        this.highchart.setSize(width, height);
                                    }
                                }
                            },
                        ]
                    },
                    {
                        xtype: "gridpanel",
                        reference: "ddsDrRsvrGrid",
                        width: 450,
                        border: true,
                        columns: [{
                                header: '时间',
                                dataIndex: 'tm',
                                align: 'center',
                                flex: 1.5,
                                // renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')
                                renderer: function(value) {
                                    if (/\.0$/.test(value)) {
                                        return value.substring(0, 19);
                                    } else {
                                        return value;
                                    }
                                }
                            },
                            {
                                header: '库上水位(m)',
                                dataIndex: 'rz',
                                align: 'center',
                                flex: 1
                            },
                            {
                                header: '入库流量(m&sup3;/s)',
                                dataIndex: 'inq',
                                align: 'center',
                                flex: 1
                            },
                            {
                                header: '蓄水量(亿m&sup3;)',
                                dataIndex: 'w',
                                align: 'center',
                                width: '19.8%'
                            }
                        ],
                        store: {
                            type: "ddsDrRsvr",
                            listeners: {
                                datachanged: function(data, eOpts) {
                                    var highchart = Ext.ComponentQuery.query('#inforChart4')[0].highchart;
                                    var highchart2 = Ext.ComponentQuery.query('#inforChart6')[0].highchart;
                                    var categoriesData = [],
                                        series = [{
                                            name: "库上水位",
                                            connectNulls: true,
                                            data: []
                                        }, {
                                            name: "入库流量",
                                            connectNulls: true,
                                            data: []
                                        }],
                                        series2 = [{
                                            name: "蓄水量",
                                            connectNulls: true,
                                            data: []
                                        }];
                                    var storeData = data.getData().items;
                                    for (var i = 0; i < storeData.length; i++) {
                                        categoriesData.push(Ext.util.Format.date(storeData[i].data.tm, "Y-m-d H:i:s"));
                                        series[0].data.push(storeData[i].data.rz ? Number(storeData[i].data.rz) : ""); //库上水位
                                        series[1].data.push(storeData[i].data.inq ? Number(storeData[i].data.inq) : ""); //入库流量
                                        series2[0].data.push(storeData[i].data.w ? Number(storeData[i].data.w) : ""); //蓄水量
                                    }
                                    highchart.update({
                                        xAxis: {
                                            categories: categoriesData,
                                        },
                                        series: series
                                    });
                                    highchart2.update({
                                        xAxis: {
                                            categories: categoriesData,
                                        },
                                        series: series2
                                    });
                                }
                            }
                        },
                        bbar: {
                            xtype: "pagingtoolbar",
                            autoLoad: true,
                            // displayInfo: true,
                            // displayMsg: "显示从第{0}条数据到第{1}条数据，共{2}条数据",
                            // emptyMsg: "没有记录"
                        },
                        stripeRows: true, //斑马线
                        columnLines: true //行线
                    }
                ]
            }
        ]
    }
});